<template>
    <div> 
      <p>页面</p>
      <el-form :model="SongListForm" :rules="rules" ref="SongListForm" label-width="100px" class="demo-ruleForm">
  
        <el-form-item label="标题" prop="title">
            <el-input v-model="SongListForm.title"></el-input>
        </el-form-item>

        <el-form-item label="标签" prop="title">
          <el-select v-model="value1" multiple placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.id"
              :value="item.id"
              :label="item.name">
            </el-option>
          </el-select>
        </el-form-item>
      
        <el-form-item label="创建时间" prop="createTime">
          <el-col :span="11">
            <el-date-picker type="date" placeholder="选择日期" v-model="SongListForm.createTime" style="width: 100%;"></el-date-picker>
          </el-col>
        </el-form-item>
  
        <el-form-item label="图片" prop="pic">
          <UpLoadImg :action="action" :dialogImageUrl="SongListForm.pic" @Sendimg="sendimg" ref="uploadimg" :fileList="fileList"></UpLoadImg>
        </el-form-item>
  
        <el-form-item label="简介" prop="introduce">
          <WangEditor :introduction="SongListForm.introduce" @sendEditor="handlEditor" ref="wangedit"></WangEditor>
      </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm('SongListFrom')">确定</el-button>
            <el-button @click="resetForm('SongListForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </template>
  
  <script>
  import UpLoadImg from '@/components/Background/UpLoadImg/uploadimg.vue'
  import WangEditor from '@/components/WangEditor.vue'
  import { mapState} from 'vuex'
  export default {
      components:{
          WangEditor,
          UpLoadImg
      },
      data() {
        return {
          options: [],
          value1: [],
          action:this.$baseUrl + '/files/SongListImgUpload',
          fileList:[],
          SongListForm: {
            title:'',
            style:'',
            createTime:'',
            pic: '',
            introduce:'',
            id:'',
            listUserid:''
          },
          rules: {
            createTime: [
              { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
            ],
          }
        }
      },
      methods:{
        async submitForm(){
          if(this.title == "添加"){
            console.log("llPPP{;u9o9908")
            const res = await this.$axios.post("SongList/AddSongList",this.SongListForm)
            console.log(res)
            if(res.code == 200){
              this.addTags()
              this.$router.push("/songlist")
              this.$message.success(res.msg)
            }
          }
          else{
            const ase = await this.$axios.put("SongList/UpdateSongList",this.SongListForm)
            this.updateTag()
            this.$router.push("/songlist")
            this.$message.success(ase.msg)
          }
        },
        async SelectTag(){
          const res = await this.$axios.post(`tagMap/SelectTag?targetId=${this.SongListForm.id}&targetType=0`)
          this.value1 = res
        },
        async SelectSongList(){
          const res = await this.$axios.post(`SongList/SelectSongList?title=${this.SongListForm.title}`)
          console.log(res)
          return res
        },
        async updateTag(){
          const res = await this.$axios.post(`tagMap/UpdateTagMap?targetType=0&tagId=${this.value1}&targetId=${this.SongListForm.id}`)
          return res
        },

        async addTags(){
          let res = await this.SelectSongList()
          console.log("pwoepoepweopweo")
          console.log(res)
          console.log(res.id)
          const ase = await this.$axios.post(`tagMap/AddTagMap?targetType=0&targetId=${res.id}&tagId=${this.value1}`)
        },
        handlEditor(val){
          this.SongListForm.introduce = val.replace(/<[^>]+>/g,"\n")
        },
        resetForm(formName) {
          this.$refs[formName].resetFields();
          this.$refs.uploadimg.clear()
          this.$refs.wangedit.editor.clear()
        },
        sendimg(val){
          this.SongListForm.pic = val
          console.log(val)
        },
        async getBiaoqian(){
          const res = await this.$axios.get("tag/SelectAll")
          console.log(res.code)
          console.log(res.data)
          if(res.code == "200"){
            this.options = res.data
          }
        }
      },
      created(){
        this.getBiaoqian()
        if(this.title == "编辑"){
          this.SongListForm=this.baseDate
          this.SelectTag()
          this.fileList.push({name:'',url:this.SongListForm.pic})
          this.$nextTick(()=>{
            this.$refs.wangedit.html=this.SongListForm.introduce
          })
        }
      },
      computed:{
        ...mapState('editfo',['title','baseDate'])
      }
  }
  </script>
  
  <style scoped>
  
  </style>